<template>
  <div class="incestment-1">
    <div class="top-3"></div>
    <div class="incestment-2">
      <div class="incestment-3">
          <div class="incestment-6">关于我们</div>
          <div :class="active1 == 1 ?'incestment-7':'incestment-5'"  ><a href="" class="aaa2" @click.prevent="cli1()"><p>公司简介</p></a></div>
          <div :class="active == 1 ?'incestment-7':'incestment-5'"  ><a href="" class="aaa2" @click.prevent="cli2()"><p>基本信息</p></a></div>
          <div :class="active == 2 ?'incestment-7':'incestment-5'" ><a href="" class="aaa2" @click.prevent="cli3()"><p>管理团队</p></a></div>
          <div :class="active == 3 ?'incestment-7':'incestment-5'"  ><a href="" class="aaa2" @click.prevent="cli4()"><p>资质证书</p></a></div>
           <div class="incestment-6">对外公告</div>
          <div :class="active == 4 ?'incestment-7':'incestment-5'"  ><a href="" class="aaa2" @click.prevent="cli5()"><p>定期报告</p></a></div>
          <div :class="active == 5 ?'incestment-7':'incestment-5'" ><a href="" class="aaa2" @click.prevent="cli6()"><p>审核信息</p></a></div>
          <div :class="active == 6 ?'incestment-7':'incestment-5'" ><a href="" class="aaa2" @click.prevent="cli7()"><p>重大事项</p></a></div>
           <div class="incestment-6">定期报告</div>
          <div :class="active == 7 ?'incestment-7':'incestment-5'"  ><a href="" class="aaa2" @click.prevent="cli8()"><p>消费金融</p></a></div>
          <div :class="active == 8 ?'incestment-7':'incestment-5'"  ><a href="" class="aaa2" @click.prevent="cli9()"><p>汽车金融</p></a></div>
          <div :class="active == 9 ?'incestment-7':'incestment-5'" ><a href="" class="aaa2" @click.prevent="cli10()"><p>房贷金融</p></a></div>
           <div class="incestment-6">运营数据</div>
          <div :class="active == 10 ?'incestment-7':'incestment-5'"  ><a href="" class="aaa2" @click.prevent="cli11()"><p>运营数据</p></a></div>
          <div :class="active == 11 ?'incestment-7':'incestment-5'" ><a href="" class="aaa2" @click.prevent="cli12()"><p>运营报告</p></a></div>
          <div :class="active == 12 ?'incestment-7':'incestment-5'"  ><a href="" class="aaa2" @click.prevent="cli13()"><p>信披确认函</p></a></div>
      </div>
      <div class="incestment-4">
        <component :is="Healthys"></component>
      </div>
     
    </div>
     <Bottom/>
  </div>
</template>

<script>
import BriefIntroduction from "../information/BriefIntroduction.vue"
import EssentialInformation1 from "../information/EssentialInformation1.vue"
import ManagementTeam2 from "../information/ManagementTeam2.vue"
import QualificationCertificate3 from "../information/QualificationCertificate3.vue"
import PeriodicReport4 from "../information/PeriodicReport4.vue"
import AuditInformation5 from "../information/AuditInformation5.vue"
import MajorIssues6 from "../information/MajorIssues6.vue"
import ConsumerFinance7 from "../information/ConsumerFinance7.vue"
import AutoFinance8 from "../information/AutoFinance8.vue"
import HousingLoanFinance9 from "../information/HousingLoanFinance9.vue"
import OperationalData10 from "../information/OperationalData10.vue"
import OperationalReports11 from "../information/OperationalReports11.vue"
import LetterOfConfirmation12 from "../information/LetterOfConfirmation12.vue"

import Bottom from "./Bottom.vue"
export default {
  components: {
    BriefIntroduction,
    EssentialInformation1,
    ManagementTeam2,
    QualificationCertificate3,
    PeriodicReport4,
    AuditInformation5,
    MajorIssues6,
    ConsumerFinance7,
    AutoFinance8,
    HousingLoanFinance9,
    OperationalData10,
    OperationalReports11,
    LetterOfConfirmation12,
    Bottom
  },
  data () {
    return {
       active: 0,
      active1: 1,
      Healthys: "BriefIntroduction",
    }
  },
  methods:{
    cli1(index) {
      this.Healthys = "BriefIntroduction";
      //把index值赋给active，点击改变样式

      // alert(this.id);//打印结果为{user:'david'}
      this.active1 = 1;
      this.active = 0;
    },
    cli2(index) {
      this.Healthys = "EssentialInformation1";
      //把index值赋给active，点击改变样式

      // alert(this.id);//打印结果为{user:'david'}
      this.active1 = 0;
      this.active = 1;
    },
    cli3(index) {
      this.Healthys = "ManagementTeam2";
      //把index值赋给active，点击改变样式

      // alert(this.id);//打印结果为{user:'david'}
      this.active1 = 0;
      this.active = 2;
    },
    cli4(index) {
      this.Healthys = "QualificationCertificate3";
      //把index值赋给active，点击改变样式

      // alert(this.id);//打印结果为{user:'david'}
      this.active1 = 0;
      this.active = 3;
    },
    cli5(index) {
      this.Healthys = "PeriodicReport4";
      //把index值赋给active，点击改变样式

      // alert(this.id);//打印结果为{user:'david'}
      this.active1 = 0;
      this.active = 4;
    },
    cli6(index) {
      this.Healthys = "AuditInformation5";
      //把index值赋给active，点击改变样式

      // alert(this.id);//打印结果为{user:'david'}
      this.active1 = 0;
      this.active = 5;
    },
    cli7(index) {
      this.Healthys = "MajorIssues6";
      //把index值赋给active，点击改变样式
      // alert(this.id);//打印结果为{user:'david'}
      this.active1 = 0;
      this.active = 6;
    },
    cli8(index) {
      this.Healthys = "ConsumerFinance7";
      //把index值赋给active，点击改变样式

      // alert(this.id);//打印结果为{user:'david'}
      this.active1 = 0;
      this.active = 7;
    },
    cli9(index) {
      this.Healthys = "AutoFinance8";
      //把index值赋给active，点击改变样式

      // alert(this.id);//打印结果为{user:'david'}
      this.active1 = 0;
      this.active = 8;
    },
    cli10(index) {
      this.Healthys = "HousingLoanFinance9";
      //把index值赋给active，点击改变样式

      // alert(this.id);//打印结果为{user:'david'}
      this.active1 = 0;
      this.active = 9;
    },
    cli11(index) {
      this.Healthys = "OperationalData10";
      //把index值赋给active，点击改变样式

      // alert(this.id);//打印结果为{user:'david'}
      this.active1 = 0;
      this.active = 10;
    },
    cli12(index) {
      this.Healthys = "OperationalReports11";
      //把index值赋给active，点击改变样式

      // alert(this.id);//打印结果为{user:'david'}
      this.active1 = 0;
      this.active = 11;
    },
    cli13(index) {
      this.Healthys = "LetterOfConfirmation12";
      //把index值赋给active，点击改变样式

      // alert(this.id);//打印结果为{user:'david'}
      this.active1 = 0;
      this.active = 12;
    }
  }
};
</script>

<style>
.top-3{
  width: 100%;
  float: left;
  height: 50px;
}
.aaa2 p:visited{
  color:red;
}
.aaa2 p{
  color: rgb(36, 96, 145);
}
.incestment-6{
    float: left;
    width: 100%;
    height: 40px;
    font-size: 110%;
    text-align: center;
    line-height: 40px;
    margin-top: 5px;
    font-weight:bold;
}
.incestment-5{
    float: left;
    width: 100%;
    height: 40px;
    /* font-size: 110%; */
    text-align: center;
    line-height: 40px;
    margin-top: 5px;
}.incestment-7{
    float: left;
    width: 100%;
    height: 40px;
    /* font-size: 110%; */
    text-align: center;
    line-height: 40px;
    margin-top: 5px;
    color: red;
    font-weight:bold;
}
.incestment-4{
    float: left;
    width: 75%;
    height: 100%;
    margin-left: 5%;
    /* background-color: rgb(16, 219, 202); */
}
.incestment-3{
    float: left;
    width: 13%;
    height: 1000px;
    background-color: #fff;
}
.incestment-2{
    float: left;
    width: 83%;
    margin-left: 12%;
     background-color: #f6f6f6;
    margin-top: 20px;
}
.incestment-1{
  width: 100%;
  background-color: #f6f6f6;
  float: left;
   height: 100%; 
}
</style>